// 初始化富文本编辑器--------------------------------
initEditor()
// 初始化文章分类
getCate()


//通过cropper提供方法实现裁剪效果---------------------
// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)


//为选择封面按钮绑定点击事件弹出选择图片选框(弹出隐藏的input框)
$('#my_pic').on('click', function () {
    $('#cover_img').click()
})

//为隐藏的input文件选框添加change事件，拿到用户选择的图片
$('#cover_img').on('change', function (e) {
    if (e.target.files.length <= 0) return layui.layer.msg('请选择图片')
    let file = e.target.files[0]
    let newImgURL = URL.createObjectURL(file)

    // 3. 初始化裁剪区域
    $image.cropper('destroy')
        .attr('src', newImgURL)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域
})

//接收编辑按钮传入的bookId值
var params = new URLSearchParams(location.search)
var artId = params.get('Id')
if (artId) {
    getBookInfo(artId)
}


//利用事件委托为表单绑定提交事件
var state = '已发布'
//确定文档要求的state发布状态的值
$('#draft').on('click', function () {
    state = $(this).attr('data-state')
})
$('.layui-card-body').on('submit', '#form', function (e) {
    e.preventDefault()
    var fd = new FormData($(this)[0])
    fd.append('state', state)

    if (artId) {
        //则为修改文章内容
        // console.log('编辑更新文章');
        fd.append('Id', artId)
        // 将裁剪后的图片，输出为文件--------------------------
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                //blob即为二进制
                fd.append('cover_img', blob)
                // fd.forEach(function (v, k) {
                //     console.log(k, v);
                // })
                editArticle(fd)
            })

    } else {
        // 将裁剪后的图片，输出为文件--------------------------
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                //blob即为二进制
                fd.append('cover_img', blob)
                // fd.forEach(function (v, k) {
                //     console.log(k, v);
                // })
                addArticle(fd)
            })
    }
})


//封装函数发送ajax发布新文章请求
function addArticle(formData) {
    $.ajax({
        type: 'POST',
        url: '/my/article/add',
        data: formData,
        contentType: false,
        processData: false,
        success: function (res) {
            if (res.status !== 0) return layui.layer.msg(res.message)
            layui.layer.msg(res.message)
            location.href = '/article/art_list.html'
        }
    })
}

//--------------------------------------------------

//封装通过ID获取当前文章信息
function getBookInfo(id) {
    $.ajax({
        type: 'GET',
        url: '/my/article/' + id,
        success: function (res) {
            if (res.status !== 0) return layui.layer.msg(res.message)
            layui.form.val('bookinfo', res.data)
        }
    })
}

//封装通过ID修改文章的ajax请求
function editArticle(formData) {
    $.ajax({
        type: 'POST',
        url: '/my/article/edit',
        data: formData,
        contentType: false,
        processData: false,
        success: function (res) {
            if (res.status !== 0) return layui.layer.msg(res.message)
            layui.layer.msg(res.message)
            location.href = '/article/art_list.html'
        }
    })
}

//--------------------------------------------------

//封装函数拿到文章分类数据
function getCate() {
    $.ajax({
        type: 'GET',
        url: '/my/article/cates',
        success: function (res) {
            if (res.status !== 0) return layui.layer.msg(res.message)
            // template模板定义文章类别选择
            var htmlStr = template('cateArt', res)
            $('#cateList').html(htmlStr)
            layui.form.render()
        }
    })
}


